<template>
  <d2-container>
    <el-form
      :model="FromData"
      status-icon
      :rules="rules"
      ref="FromData"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- <el-form-item label="导入分类">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="handleChange"
          :show-file-list="false"
        >
          <el-button type="primary">批量导入分类</el-button>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="图片地址" prop="image">
        <el-input type="text" v-model="FromData.image"></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input type="text" v-model="FromData.name"></el-input>
      </el-form-item>
      <el-form-item label="商品信息" prop="info">
        <el-input type="textarea" :rows="2" placeholder="请输入商品信息" v-model="FromData.info"></el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="typeId">
        <el-select v-model="FromData.typeId" placeholder="请选择商品分类">
          <el-option
            v-for="item in FromData.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="进价" prop="piceJj">
        <el-input type="text" v-model="FromData.piceJj"></el-input>
      </el-form-item>
      <el-form-item label="售价" prop="piceCs">
        <el-input type="text" v-model="FromData.piceCs"></el-input>
      </el-form-item>
      <el-form-item label="规格" prop="size">
        <el-input type="text" v-model="FromData.size"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('FromData')">提交</el-button>
        <el-button @click="resetForm('FromData')">重置</el-button>
      </el-form-item>
    </el-form>
  </d2-container>
</template>

<script>
import { addCommodity, selectGoodType } from "@/api/goods/index";
import util from "@/libs/util.js";

export default {
  name: "",
  data() {
    return {
      FromData: {
        image: "",
        name: "",
        info: "",
        typeId: "",
        piceJj: "",
        piceCs: "",
        size: "",
        options: []
      },
      rules: {
        image: [
          { required: true, message: "图片地址不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        typeId: [
          { required: true, message: "商品分类不能为空", trigger: "change" }
        ],
        piceJj: [{ required: true, message: "进价不能为空", trigger: "blur" }],
        piceCs: [{ required: true, message: "售价不能为空", trigger: "blur" }],
        size: [{ required: true, message: "规格不能为空", trigger: "blur" }]
      }
    };
  },
  mounted() {
    let params = {
      page: 1,
      limit: 99999999
    };
    this.getGoodType(params);
  },
  methods: {
    // 获取分类
    getGoodType(params) {
      selectGoodType(params)
        .then(res => {
          if (res.success) {
            res.rows.forEach(item => {
              let arr = {
                label: item.name,
                value: item.id
              };
              this.FromData.options.push(arr);
            });
            console.log(this.FromData.options);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 上传文件成功或失败的回调
    handleChange(response, file, fileList) {
      console.log(response, file, fileList);
    },

    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // 如果表单通过，则发送请求
        if (valid) {
          let params = this.FromData;
          params.classLevel = 0;
          params.stock = 0;
          params.status = 1;
          params.belongId = util.cookies.get("roleid");
          addCommodity(params)
            .then(res => {
              if (res.success) {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                // 跳转路由
                this.$router.push({
                  name: 'goodsManufacturer-goodsInfoManufacturer'
                })
              }
            })
            .catch(err => {
              this.$message.error("表单校验失败，请检查" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>